<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery Filter 1</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				// :first 选取第一个元素
				$('li:first').css('color', 'green'); 	// 等价于$('li').first().css('color', 'green');
				// :last 选取最后一个元素
				$('li:last').css('color', 'blue'); 		// 等价于$('li').last().css('color', 'green');
				// 如果要选取第一个ul的最后一个li元素
				$('ul:first li:last').css('background', '#ccc');
				
				// :not(.className)选取class不是red的元素
				$('li:not(.red)').css('font-weight', 'bold'); // 等价于 $('li').not('.red').css('color', 'green');
				
				// :even/:odd选取索引是偶数/奇数的素有元素, :even和 :odd均使用基于0的index
				$('li:even').css('font-size', '30px');
				
				// :eq(index)/:gt(index)/:lt(index)选取等于/大于/小于指定索引的元素
				// 元素索引从0开始,索引为负表示从末尾算起, 末尾元素的索引为-1
				$('li:eq(2)').hide(); // 等价于$('li').eq(2).hide();
				$('li:eq(-2)').hide();
				
				// :header选取<h1>~<h6>元素
				// :focus选取当前被焦点的元素, 必须是网页初始状态的已经被激活焦点的元素才能实现元素获取, 而不是鼠标点击或者Tab键盘敲击激活的
				$('input').get(0).focus();
				$(':focus').css('background', 'yellow');
			});	
		</script>
		</head>
	<body>
		
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li class="red">Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 6</li>
		</ul>
		
		<ul>
			<li class="red">Another Item 1</li>
			<li>Another Item 2</li>
			<li>Another Item 3</li>
			<li>Another Item 4</li>
			<li>Another Item 5</li>
			<li>Another Item 6</li>
		</ul>
		
		<hr/>
		
		<form action="">
			<input type="text"/>
		</form>
	</body>
</html>